<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>3D炸弹盒子</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: #000;
			/*			视距 增加盒子立体感*/
			perspective: 1000px;
		}

		section {
			position: relative;
			width: 150px;
			height: 150px;
			/*			让子元素保留其3D位置*/
			transform-style: preserve-3d;
			animation: rotate 5s linear infinite;
		}

		section div {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #fff;
			transition: all 1s;
		}

		section div img {
			width: 100%;
			height: 100%;
		}

		section div:nth-child(1) {
			background: #CC9812;
			transform: translateZ(75px)
		}

		section:hover div:nth-child(1) {
			background: #CC9812;
			transform: translateZ(200px)
		}

		section:hover div:nth-child(7) {
			background: #CC9812;
			transform: translateZ(400px)
		}

		section div:nth-child(2) {
			background: #1A4E89;
			transform: rotateX(-180deg) translateZ(75px)
		}

		section:hover div:nth-child(2) {
			background: #1A4E89;
			transform: rotateX(-180deg) translateZ(200px)
		}

		section:hover div:nth-child(8) {
			background: #1A4E89;
			transform: rotateX(-180deg) translateZ(400px)
		}

		section div:nth-child(3) {
			background: #E704BF;
			transform: rotateX(90deg) translateZ(75px)
		}

		section:hover div:nth-child(3) {
			background: #E704BF;
			transform: rotateX(90deg) translateZ(200px)
		}

		section:hover div:nth-child(9) {
			background: #E704BF;
			transform: rotateX(90deg) translateZ(400px)
		}

		section div:nth-child(4) {
			background: #9B0205;
			transform: rotateX(-90deg) translateZ(75px)
		}

		section:hover div:nth-child(4) {
			background: #9B0205;
			transform: rotateX(-90deg) translateZ(200px)
		}

		section:hover div:nth-child(10) {
			background: #9B0205;
			transform: rotateX(-90deg) translateZ(400px)
		}

		section div:nth-child(5) {
			background: #6B0489;
			transform: rotateY(90deg) translateZ(75px)
		}

		section:hover div:nth-child(5) {
			background: #6B0489;
			transform: rotateY(90deg) translateZ(200px)
		}

		section:hover div:nth-child(11) {
			background: #6B0489;
			transform: rotateY(90deg) translateZ(400px)
		}

		section div:nth-child(6) {
			background: #1AA52D;
			transform: rotateY(-90deg) translateZ(75px)
		}

		section:hover div:nth-child(6) {
			background: #1AA52D;
			transform: rotateY(-90deg) translateZ(200px)
		}

		section:hover div:nth-child(12) {
			background: #1AA52D;
			transform: rotateY(-90deg) translateZ(400px)
		}

		section div:nth-child(7) {
			background: #CC9812;
			transform: translateZ(75px)
		}

		section div:nth-child(8) {
			background: #1A4E89;
			transform: rotateX(-180deg) translateZ(75px)
		}

		section div:nth-child(9) {
			background: #E704BF;
			transform: rotateX(90deg) translateZ(75px)
		}

		section div:nth-child(10) {
			background: #9B0205;
			transform: rotateX(-90deg) translateZ(75px)
		}

		section div:nth-child(11) {
			background: #6B0489;
			transform: rotateY(90deg) translateZ(75px)
		}

		section div:nth-child(12) {
			background: #1AA52D;
			transform: rotateY(-90deg) translateZ(75px)
		}

		section div:nth-child(13) {
			background: #CC9812;
			transform: translateZ(75px)
		}

		section div:nth-child(14) {
			background: #1A4E89;
			transform: rotateX(-180deg) translateZ(75px)
		}

		section div:nth-child(15) {
			background: #E704BF;
			transform: rotateX(90deg) translateZ(75px)
		}

		section div:nth-child(16) {
			background: #9B0205;
			transform: rotateX(-90deg) translateZ(75px)
		}

		section div:nth-child(17) {
			background: #6B0489;
			transform: rotateY(90deg) translateZ(75px)
		}

		section div:nth-child(18) {
			background: #1AA52D;
			transform: rotateY(-90deg) translateZ(75px)
		}

		@keyframes rotate {
			0% {
				transform: rotateY(0) rotateX(0)
			}

			100% {
				transform: rotateY(360deg) rotateX(360deg)
			}
		}
	</style>
</head>

<body>
	<section>
		<div><img src="../image/1.png"></div>
		<div><img src="../image/2.png"></div>
		<div><img src="../image/3.png"></div>
		<div><img src="../image/4.png"></div>
		<div><img src="../image/5.png"></div>
		<div><img src="../image/6.png"></div>
		<div><img src="../image/1.png"></div>
		<div><img src="../image/2.png"></div>
		<div><img src="../image/3.png"></div>
		<div><img src="../image/4.png"></div>
		<div><img src="../image/5.png"></div>
		<div><img src="../image/6.png"></div>
		<div><img src="../image/1.png"></div>
		<div><img src="../image/2.png"></div>
		<div><img src="../image/3.png"></div>
		<div><img src="../image/4.png"></div>
		<div><img src="../image/5.png"></div>
		<div><img src="../image/6.png"></div>
	</section>
</body>

</html>